<template>
  <div class="app-container bg-white">
    <div class="page-header flex align-center space-between">
        <div class="font-weight--lg font-size--lg">添加商品</div>
        <div>
            <el-button size="mini" type="primary" @click="addAllOption()">批量添加</el-button>
        </div>
    </div>

    <div class="page-body">
      <el-form :model="queryForm" ref="queryFormRef" :inline="true" size="small">
        <el-form-item label="商品名称：">
          <el-input size="small" v-model.trim="queryForm.title" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类：">
          <el-cascader size="small" :options="classDataList" placeholder="请选择商品分类" :show-all-levels="false"
                v-model="queryForm.classIds" :props="{ value: 'id', label:'title', children:'goodsCategoryModelList' }"></el-cascader>
        </el-form-item>
        <el-form-item label="售价：">
          <el-col :span="11">
            <el-input size="small" v-model="queryForm.minPrice" placeholder="请输入最低售价"></el-input>
          </el-col>
          <el-col class="text-center" :span="2">-</el-col>
          <el-col :span="11">
            <el-input size="small" v-model="queryForm.maxPrice" placeholder="请输入最高售价"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getPageDataList()">查询</el-button>
          <el-button size="small" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="pageData" v-loading="loading" stripe @selection-change="handleSelectionChange" :header-cell-style="tableHeaderStyle">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="surfaceImg" label="商品图片">
          <template slot-scope="scope">
            <img :src="baseImgUrl + '/' + scope.row.surfaceImg" class="shop_avator" v-if="scope.row.surfaceImg">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称"></el-table-column>
        <el-table-column prop="goodsNo" label="商品编码"></el-table-column>
        <el-table-column prop="categoryTitle" label="商品分类"></el-table-column>
        <el-table-column prop="minSupplyPrice" label="成本价（元）">
          <template slot-scope="scope">
            {{scope.row.minSupplyPrice}} ~ {{scope.row.maxSupplyPrice}}
          </template>
        </el-table-column>
        <el-table-column prop="minPrice" label="售价（元）">
          <template slot-scope="scope">
            {{scope.row.minPrice}} ~ {{scope.row.maxPrice}}
          </template>
        </el-table-column> 
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="addOneOption(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
    </div>

    <add-store-dialog :title="dialogTitle" :single="isSingleMode" :isShow.sync="isShowDialog" :list="selectDataList" :levelList="settingDataList" @close="closeDialog" @confirm="confirmDialog"/>
  </div>
</template>

<script>
  import Setting from '@/settings';
  import AddStoreDialog from '@/views/shared-management/components/addStoreDialog';
  import { GetStoreClassList } from '@/views/store-management/services/index';
  import { GetWaitSharedGoodsList, GetSharedSettings } from '@/views/shared-management/services/index';

  export default {
    components:{
      AddStoreDialog
    },
    data() {
      return {
        classDataList: [],
        queryForm: {
            title: '',
            classIds: [],
            minPrice:	'',
            maxPrice:	''
        },
        pageData: [],
        pageCount: 0,
        pageIndex: 1,
        loading: false,
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,
        multipleSelection: [],
        baseImgUrl: process.env.VUE_APP_FILE_URL,

        dialogTitle: '',
        isSingleMode: true,
        isShowDialog: false,
        selectDataList: [],
        settingDataList: []
      }
    },
    methods: {
      addOneOption(rowData) {
        this.isSingleMode = true;
        this.isShowDialog= true;
        this.selectDataList = [rowData];
      },
      addAllOption(){
        if (!this.multipleSelection || !this.multipleSelection.length) {
          this.$message.warning('请选择需要添加的商品!');
          return;
        }
        this.isSingleMode = false;
        this.isShowDialog= true;
        this.selectDataList = this.multipleSelection;
      },
      closeDialog() {
        this.isShowDialog = false;
      },
      confirmDialog() {
        this.getPageDataList();
        this.closeDialog();
      },
      // 分页操作
      handlePagingChange(event) {
        this.pageIndex = event;
        this.getPageDataList();
      },
      handleSizeChange(event) {
        this.pageIndex = 1;
        this.pageSize = event;
        this.getPageDataList();
      },
      handleSelectionChange(event) {
        this.multipleSelection = event
      },
      // 获取页面的数据
      getPageDataList() {
        this.loading = true;
        GetWaitSharedGoodsList({
            title:	this.queryForm.title,
            categoryId: this.queryForm.classIds[this.queryForm.classIds.length - 1],
            maxPrice:	this.queryForm.maxPrice,
            minPrice: this.queryForm.minPrice,
            pageNum: this.pageIndex,
            pageSize: this.pageSize
        })
        .then(data => {
            this.loading = false;
            if (data.code != 200) {
                this.$message.error('加载失败，请重新刷新列表');
                return;
            }
            this.pageData = data.data.list;
            this.pageCount = data.data.total;
        })
        .catch(error => {
            this.loading = false;
            this.$message.error(error);
        })
      },
      resetOption() {
        this.queryForm.title = '';
        this.queryForm.classIds = [];
        this.queryForm.minPrice = '';
        this.queryForm.maxPrice = '';
        this.pageIndex = 0;
        this.getPageDataList();
      },
      // 获取商品分类数据
      getStoreClassList() {
        GetStoreClassList()
        .then(data => {
          if (data.code == 200) {
            this.classDataList = data.data;

            this.getPageDataList();
          }
        })
      },
      getPageDataSettings() {
        GetSharedSettings()
        .then(data => {
          if (data.code == 200) {
            this.settingDataList = data.data.levelList.map(item => {
                delete item.id;
                return item;
            })
          }
        })
      }
    },
    created() {
      this.getStoreClassList();
      this.getPageDataSettings();
      this.getPageDataList();
    }
  }
</script>

<style lang="scss" scoped>
.shop_avator {
  width: 64px;
  height: 64px;
  vertical-align: middle;
}
</style>
